<template>
  <!--模板-->
  <el-drawer
    v-model="drawerInfo.isShow"
    title="修改meta"
    :with-header="false"
    :modal="true"
    size="450px"
  >
    <!--表单-->
    <el-tabs type="border-card" @tab-click="tabClick">
      <el-tab-pane label="基础">
        <!--基础属性-->
        <el-scrollbar height="600px">
          <item-base/>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="扩展">
        <!--扩展属性-->
        <item-extend/>
      </el-tab-pane>
      <el-tab-pane label="导出">
        <item-format :meta="itemMeta"/>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import { regItemState } from './state-item'
  import itemBase from './item-base.vue'
  import itemExtend from './item-extend.vue'
  import itemFormat from './item-output.vue'

  export default defineComponent({
    name: 'nf-meta-help-item-base-drawer',
    components: {
      // ElRow, ElCol, ElCard, ElScrollbar,
      itemBase,
      itemExtend,
      itemFormat
    },
    props: {
      drawerInfo: Object, // 操作抽屉的展开与合拢
      itemMeta: Object // 要维护的 meta
    },
    setup(props, context) {

      // 根据属性，设置状态
      const state = regItemState(props.itemMeta)

      state.setMeta(props.itemMeta)

      // 外部设置属性的函数，设置和获取分开处理，代码可以简单一点
      context.expose({
        setMeta: (meta) => {
          console.log('内部设置meta：', meta)
          state.setMeta(meta)
        }
      })

      return {
      }
    }
  })
</script>